var init = 0
window.onload = (other_aspects) => {
    if (!init) {
        // 初始化暗黑模式
        createRoot()
    }
    init++
    if (typeof other_aspects === 'function') {
        other_aspects()
    }
}

function createRoot() {
    const Dom = document.getElementsByTagName('body')[0]

    const Button1 = cDom({
        domName: 'button',
        id: "start",
        textContent: '打开摄像头',
        className: 'cDombtn btn btn-primary'
    })

    const Button2 = cDom({
        domName: 'button',
        id: "end",
        textContent: '关闭摄像头',
        className: 'cDombtn btn btn-primary'
    })

    // const Button3 = cDom({
    //     domName: 'button',
    //     id: "play-video",
    //     textContent: '播放录制影像',
    //     className: 'cDombtn'
    // })

    const download = cDom({
        domName: 'button',
        id: "download",
        textContent: '下载摄像头录制',
        className: 'cDombtn btn btn-primary'
    })

    // const Button4 = cDom({
    //     domName: 'button',
    //     id: "downloadat",
    //     textContent: '下载屏幕录制',
    //     className: 'cDombtn'
    // })

    const Button5 = cDom({
        domName: 'button',
        id: "record",
        textContent: '开始屏幕录制',
        className: 'cDombtn btn btn-primary'
    })

    const Button6 = cDom({
        domName: 'button',
        id: "stop",
        textContent: '结束屏幕录制',
        className: 'cDombtn btn btn-primary'
    })

    const stream = cDom({
        domName: 'video',
        id: "stream",
        className: 'stream_video'
    })

    // const video = cDom({
    //     domName: 'video',
    //     id: "video",
    //     className: 'stream_video'
    // })

    const play = cDom({
        domName: 'video',
        id: "play",
        className: 'stream_video'
    })

    // 父盒子
    const parentBox = cDom({
        domName: 'div',
        id: "parentBox",
    })
    // 按钮盒子
    const btnBox = cDom({
        domName: 'div',
        id: "btnBox",
    })
    // 后台屏幕录制控制
    const BTTYPE = [
        // 'start_camera', 'end_camera',
        //  'play_camera', 'download_camera', 
        'start_screen', 'end_screen', 'download_screen'
    ]
    const BTNARR = [
        // Button4,
        Button5, Button6, download
    ]

    BTNARR.map((v, i) => {
        // console.log('v==> ', v)
        v.addEventListener('click', () => testMessage(BTTYPE[i]))
    })

    btnBox.prepend(Button1, Button2,
        // Button3, 
        ...BTNARR
    )

    parentBox.prepend(
        btnBox,
        // cDiv_children(video, 'cDiv_video'), 
        cDiv_children(stream, 'cDiv_stream'),
        // play
    )

    Dom.prepend(parentBox)
}

// 创建一个dom
function cDom(args = {}) {
    if (!args.domName) {
        console.error('domName is undefined')
        return
    }
    // console.log('args.domName=> ', args.domName)
    const Dom = document.createElement(args.domName)
    for (const key in args) {
        if (Object.hasOwnProperty.call(args, key)) {
            Dom[key] = args[key];
        }
    }
    // console.log('Dom ==> ', Dom)
    return Dom
}

function cDiv_children(dom, className, id) {
    const Div = cDom({
        domName: 'div',
        className,
        id: id || className
    })
    Div.prepend(dom)
    return Div
}